<template>
  <view class="container">
    <!-- 头部信息 -->
    <uni-section title="个人信息" type="line">
      <uni-list>
        <uni-list-item title="姓名" :rightText="userInfo.name" showArrow></uni-list-item>
        <uni-list-item title="手机号" :rightText="userInfo.phone" showArrow @click="showPhoneDialog"></uni-list-item>
      </uni-list>
    </uni-section>
    
    <!-- 统计信息 -->
    <uni-section title="业绩统计" type="line">
      <view class="stats-container">
        <view class="stat-item">
          <text class="stat-label">本月</text>
          <text class="stat-value">{{stats.month}}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">本周</text>
          <text class="stat-value">{{stats.week}}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">本季度</text>
          <text class="stat-value">{{stats.quarter}}</text>
        </view>
      </view>
    </uni-section>
    
    <!-- 退出登录按钮 -->
    <view class="logout-btn">
      <button type="warn" @click="logout">退出登录</button>
    </view>
    
    <!-- 修改手机号弹窗 -->
    <uni-popup ref="phonePopup" type="dialog">
      <uni-popup-dialog mode="input" title="修改手机号" :value="userInfo.phone"
        placeholder="请输入新手机号" @confirm="updatePhone"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: "张三",
        phone: "138****1234"
      },
      stats: {
        month: 128,
        week: 42,
        quarter: 356
      }
    }
  },
  methods: {
    // 显示修改手机号弹窗
    showPhoneDialog() {
      this.$refs.phonePopup.open()
    },
    // 更新手机号
    updatePhone(value) {
      this.userInfo.phone = value
      uni.showToast({
        title: '手机号修改成功',
        icon: 'success'
      })
    },
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里写退出登录逻辑，如清除token等
            uni.showToast({
              title: '已退出登录',
              icon: 'none'
            })
            // 退出后跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
}

.stats-container {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .stat-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .stat-value {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      margin-top: 10rpx;
    }
  }
}

.logout-btn {
  margin-top: 60rpx;
  padding: 0 30rpx;
  
  button {
    width: 100%;
  }
}
</style>